<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面 - 网页转PPT</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .section {
            margin-bottom: 40px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .section h2 {
            color: #ffd700;
            margin-top: 0;
            border-bottom: 2px solid #ffd700;
            padding-bottom: 10px;
        }
        
        .feature-list {
            list-style: none;
            padding: 0;
        }
        
        .feature-list li {
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
        }
        
        .feature-list li:before {
            content: "✨";
            margin-right: 15px;
            font-size: 1.2em;
        }
        
        .feature-list li:last-child {
            border-bottom: none;
        }
        
        .demo-content {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        
        .demo-content h3 {
            color: #ffd700;
            margin-top: 0;
        }
        
        .code-block {
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            border-left: 4px solid #ffd700;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .stat-item {
            text-align: center;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: #ffd700;
            display: block;
        }
        
        .stat-label {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .cta-button {
            display: inline-block;
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            border-radius: 25px;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(238, 90, 36, 0.3);
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(238, 90, 36, 0.4);
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            opacity: 0.8;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
                margin: 10px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌐 网页转PPT测试页面</h1>
        
        <div class="section">
            <h2>🎯 功能特性</h2>
            <ul class="feature-list">
                <li>高质量网页截图</li>
                <li>自动分页处理</li>
                <li>支持长网页内容</li>
                <li>保持原始布局</li>
                <li>一键生成PPT</li>
                <li>多种导出格式</li>
            </ul>
        </div>
        
        <div class="stats">
            <div class="stat-item">
                <span class="stat-number">99%</span>
                <span class="stat-label">成功率</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">4K</span>
                <span class="stat-label">分辨率支持</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">∞</span>
                <span class="stat-label">页面长度</span>
            </div>
        </div>
        
        <div class="section">
            <h2>💻 技术实现</h2>
            <div class="demo-content">
                <h3>核心技术栈</h3>
                <div class="code-block">
// 使用 html2canvas 进行网页截图
const canvas = await html2canvas(document.body, {
    useCORS: true,
    allowTaint: true,
    backgroundColor: '#ffffff'
});

// 使用 PptxGenJS 生成PPT
const pptx = new PptxGenJS();
const slide = pptx.addSlide();
slide.addImage({
    data: canvas.toDataURL('image/png'),
    x: 0, y: 0,
    w: 10, h: 7.5
});
                </div>
            </div>
        </div>
        
        <div class="section">
            <h2>🚀 使用方法</h2>
            <ol style="line-height: 2;">
                <li>在工具中输入目标网页地址</li>
                <li>等待网页加载完成</li>
                <li>点击"生成PPT"按钮</li>
                <li>系统自动处理并下载文件</li>
            </ol>
        </div>
        
        <div class="section">
            <h2>📱 应用场景</h2>
            <div class="demo-content">
                <h3>适用场景</h3>
                <ul style="line-height: 1.8;">
                    <li>网页内容演示</li>
                    <li>在线文档转换</li>
                    <li>网页设计展示</li>
                    <li>内容归档保存</li>
                    <li>教学材料制作</li>
                </ul>
            </div>
        </div>
        
        <div style="text-align: center; margin: 40px 0;">
            <a href="#" class="cta-button" onclick="alert('这是一个演示页面！')">
                🎉 立即体验
            </a>
        </div>
        
        <div class="footer">
            <p>© 2024 网页转PPT工具 - 让网页内容更易分享</p>
        </div>
    </div>
    
    <script>
        // 添加一些交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为统计数字添加动画效果
            const statNumbers = document.querySelectorAll('.stat-number');
            statNumbers.forEach(stat => {
                stat.style.opacity = '0';
                stat.style.transform = 'translateY(20px)';
            });
            
            setTimeout(() => {
                statNumbers.forEach((stat, index) => {
                    setTimeout(() => {
                        stat.style.transition = 'all 0.8s ease';
                        stat.style.opacity = '1';
                        stat.style.transform = 'translateY(0)';
                    }, index * 200);
                });
            }, 500);
            
            // 为特性列表添加悬停效果
            const featureItems = document.querySelectorAll('.feature-list li');
            featureItems.forEach(item => {
                item.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateX(10px)';
                    this.style.transition = 'transform 0.3s ease';
                });
                
                item.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateX(0)';
                });
            });
        });
    </script>
</body>
</html>
